<template>
  <div class="page-main">
    <el-breadcrumb class="breadcrumb">
      <el-breadcrumb-item>管理员</el-breadcrumb-item>
      <el-breadcrumb-item>菜品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main-content">
      <div class="box-card">
        <span style="color: #101010; font-size: 16px">菜品管理</span>
      </div>
      <div class="box-body" v-if="status.shopInfo">
        <div class="search">
          <div style="margin-top: 20px">
            {{ status.shopInfo.shopName }}
          </div>
        </div>
        <div class="table">
          <el-table :data="status.mealList" style="width: 100%">
            <el-table-column type="index" align="center" />
            <el-table-column label="头像" align="center">
              <template #default="scope">
                <img src="https://img.yzcdn.cn/vant/custom-empty-image.png" v-if="!scope.row['mealLogo'] || scope.row['mealLogo'].length === 0" />
                <img :src="scope.row['mealLogo']" v-else />
              </template>
            </el-table-column>
            <el-table-column prop="mealName" label="菜品名字" align="center" />
            <el-table-column prop="mealPrice" label="菜品价格" align="center" />
            <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="100"
            >
              <template #default="scope">
                <el-button type="text" @click="showDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
      v-model="mealDialog.showFlag"
      title="菜品详情"
      width="50%"
      :before-close="closeMealDialog"
  >
    <div>
      <el-form
          label-position="right"
          label-width="120px"
          :model="mealDialog.data"
          :rules="mealDialog.rules"
          ref="mealFormRef"
      >
        <el-form-item label="菜品ID:">
          <el-input disabled v-model="mealDialog.data.mealId" />
        </el-form-item>
        <el-form-item label="名字:" prop="mealName">
          <el-input v-model="mealDialog.data.mealName" />
        </el-form-item>
        <el-form-item label="价格:">
          <el-input-number disabled v-model="mealDialog.data.mealPrice" :precision="2" :step="0.1" />
        </el-form-item>
        <el-form-item label="封面:" class="whole-form">
          <div class="logo-div">
              <div class="logo-area">
                <img class="logoImg" src="https://img.yzcdn.cn/vant/custom-empty-image.png" v-if="!mealDialog.data.mealLogo || mealDialog.data.mealLogo === 0" />
                <img class="logoImg" :src="mealDialog.data.mealLogo" v-else />
              </div>
              <div class="upload-button-div">
                <el-button style="height: 50px" @click="changeToCommon">
                  <div class="button">
                    <img src="@/assets/img/shopInfo/img.png" />
                    <span>改为默认</span>
                  </div>
                </el-button>
              </div>
            </div>
        </el-form-item>
        <el-form-item label="月销:" prop="monthlySales">
          <el-input-number v-model="mealDialog.data.monthlySales" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="showConfirm(mealDialog.data.mealName, deleteMealItem)">删除</el-button>
        <el-button type="primary" @click="submitMealItem">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <confirm-dialog
      ref="confirmDialogRef"
      :info="info"
      @handleConfirm="handleConfirm"
      @cancelConfirm="cancelConfirm"
  ></confirm-dialog>
</template>

<script setup>
import ConfirmDialog from "@/components/ConfirmDialog";
import {onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {httpPostManage} from "@/api/httpService";
import {ElMessage} from "element-plus";
import {Debounce} from "@/tool";

const route = useRoute();

const mealFormRef = ref(null);

const confirmDialogRef = ref(null);

const status = reactive({
  shopId: route.query.id,
  shopInfo: null,
  mealList: []
});

const checkMonthlySales = (rule, value, callback) => {
  if (value < 0) {
    callback(new Error("请输入有效的月销数"));
  } else {
    callback();
  }
};

const mealDialog = reactive({
  showFlag: false,
  data: {
    mealId: "",
    mealName: "",
    mealLogo: "https://img.yzcdn.cn/vant/custom-empty-image.png",
    mealPrice: 0,
    monthlySales: 0
  },
  rules: {
    mealName: [
      { required: true, message: "请输入菜品名字", trigger: "blur" }
    ],
    monthlySales: [
      { required: true, message: "请输入月销数", trigger: "blur" },
      { validator: checkMonthlySales, trigger: 'blur' }
    ]
  }
});

const getShopMeals = async () => {
  let url = "/getShopMeals";
  let params = {
    shopId: status.shopId
  }
  let res = await httpPostManage(url, params);
  status.mealList = res.data["meals"];
  status.shopInfo = res.data["shop"];
};

const showDetail = (item) => {
  for (let p in mealDialog.data) {
    mealDialog.data[p] = item[p];
  }
  mealDialog.showFlag = true;
};

const changeToCommon = () => {
  mealDialog.data.mealLogo = "https://img.yzcdn.cn/vant/custom-empty-image.png"
};

const closeMealDialog = () => {
  mealFormRef.value.resetFields();
  let obj = {
    mealId: "",
    mealName: "",
    mealLogo: "https://img.yzcdn.cn/vant/custom-empty-image.png",
    mealPrice: 0,
    monthlySales: 0
  }
  mealDialog.data = obj;
  mealDialog.showFlag = false;
}

const doUpdateMeal = async () => {
  let url = "/doUpdateMeal";
  let params = mealDialog.data;
  let res = await httpPostManage(url, params);
  if(res.data === "修改成功") {
    ElMessage.success("修改成功")
  }
}

const submitMealItem = () => {
  mealFormRef["value"].validate(async (valid) => {
    if (valid) {
        await doUpdateMeal();
        await getShopMeals();
        closeMealDialog();
    }
  });
};

/**
 * confirmDialog模块
 **/
const info = reactive({
  title: "",
  content: "",
  methodName: "",
  methodParams: {}
});

const handleConfirm = Debounce(function (dialogInfo) {
  dialogInfo.methodName();
  info.title = "";
  info.content = "";
  info.methodName = "";
  info.methodParams = {};
});

const cancelConfirm = () => {
  info.title = "";
  info.content = "";
  info.methodName = "";
  info.methodParams = {};
  mealDialog.showFlag = true;
};

const showConfirm = Debounce((name, methodName) => {
  mealDialog.showFlag = false;
  info.title = "确定你的操作";
  info.content = "确定要删除" + name +"这一商品吗?";
  info.methodName = methodName;
  confirmDialogRef["value"].makeDialogVisible();
});

const deleteMealItem = async () => {
  let url = "/deleteMealItem";
  let params = mealDialog.data;
  await httpPostManage(url, params);
  await getShopMeals();
  closeMealDialog();
  ElMessage.success("删除成功")
};

onMounted(async () => {
  await getShopMeals();
});
</script>

<style lang="scss" scoped>
@import "../../assets/style/layout.scss";
</style>